<template>
  <div class="hello">
    <p :style="1==0?{color:'red',fontSize:'20px'}:{}">{{msg}}</p>
    <div v-color class="box"></div>
    <slot></slot>
    <button @click="setData">点击一下</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      son: 1,
      msg1: '星期天'
    }
  },
  methods: {
    setData () {
      // this.$emit('getData', this.son)
      this.$emit('update:msg', this.msg1)
      this.son = 2
      console.log(this.son, 'so')
    }
  },
  directives: {
    color: {
      inserted: function (el) {
        setInterval(() => {
          const color = Math.floor(Math.random() * 1000000)
          el.style.backgroundColor = `#${color}`
        }, 1500)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.box{
  width: 100px;
  height: 100px;
}
</style>
